<template>
  <div class='main_box'>
    <topBar
      class='main_top'
      @left='fn'
      :noright='true'
    >
      <template #left>
        <span class='logo'>有品</span>
      </template>
    </topBar>

    <my-swiper
      :list='bannerData'
      :autoplay='3000'
      class='my_banner_box'
      @change="onChange"
    >
      <template v-slot='obj'>
        <div class='my_item_box'>
          <img
            :src="obj.item123.pic"
            alt=""
          >
          <p>{{obj.item123.title||'qqq'}}</p>
        </div>
      </template>
      <template #indicator>
        <ul class='dot_box'>
          <li v-for='item in bannerData' :key='item.pic'></li>
        </ul>
      </template>
    </my-swiper>

    <scroll-box :list='listData'>
      <template #default='{data}'>
        <div class='mylistbox'>
          <img :src="data.pic" alt="">
          <p>{{data.title}}</p>
        </div>
      </template>
    </scroll-box>
    <div style='height:200px'>
      <RecycleScroller
        class="scroller"
        :items="list"
        :item-size="32"
        key-field="id"
        v-slot="{ item }"
        :emitUpdate='true'
        @update='getmore'
      >
        <div class="user">
          {{ item.name }}
        </div>
      </RecycleScroller>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import { getBanner,getList } from "@/api";
export default {
  name: "XXX",
  data() {
    return {
      bannerData: [],
      listData:[],
      list:[]
    };
  },
  created() {
    this.getBanner();
    this.getList();
    let temp= []
    for(let i = 0; i < 60; i++){
      temp.push({id:i,name:i})
    }
    this.list = temp
  },
  methods: {
    fn() {
      setTimeout(() => {
        this.$router.back();
      }, 2000);
    },
    getBanner() {
      getBanner().then((data) => {
        this.bannerData = Object.freeze(data.data);
        console.log(this.bannerData)
      });
    },
    getList(){
      getList(Date.now()).then(data=>{
        console.log(data)
        this.listData = Object.freeze(data.data.slice(0,10))
      })
    },
    onChange(index){
      // console.log(index)
    },
    getmore(start,end){
      console.log(start,end)
      if(end == this.list.length){
        for(let i = 100; i < 200; i++){
          this.list.push({id:i,name:i})
        }
      }
    }
  },
  components: {},
};
</script>
<style lang="less">
.main_box {
  .my_banner_box {
    
  }
}
.main_top {
  background: chocolate;
}
.logo {
  color: #fff;
}
.my_item_box {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100%;
  }
  >p{
    position: absolute;
    bottom:0
  }
}
.dot_box{
  overflow: hidden;
  li{
    float: left;
  }
}
.mylistbox{
  img{
    width: 100%;
  }
}
.scroller {
  height: 100%;
}

.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>